<template>
  <div class="more-container">
    <!-- 搜索查询 -->
    <commonline
      style="margin-top: 10px; margin-bottom: 20px"
      @addList="additem"
      @searchlist="searchlist"
      @resetform="resetform"
      :importname="'帮组中心'"
    ></commonline>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        prop="sort"
        label="排序"
        show-overflow-tooltip
        align="center"
        width="120"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.sort"
            placeholder="排序值"
            clearable
            @blur="sortHelp(scope.row)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        show-overflow-tooltip
        align="center"
      ></el-table-column>
      <el-table-column
        prop="detail "
        label="内容"
        show-overflow-tooltip
        align="center"
      >
        <template slot-scope="scope">
          <span class="edittext" @click="gophone(scope.row)">预览</span>
        </template>
      </el-table-column>

      <el-table-column prop="is_show" label="显示" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.is_show"
            :active-value="1"
            :inactive-value="0"
            @change="changeis_show(scope.row.is_show, scope.row.id)"
          ></el-switch>
        </template>
      </el-table-column>

      <el-table-column prop="" label="操作" align="center">
        <template slot-scope="scope">
          <span class="edittext" @click="editform(scope.row.id)">编辑</span>
          <span class="edittext" @click="deleteitem(scope.row.id)">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24" class="pagination">
        <!-- 翻页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30]"
          :page-size="10"
          background
          layout="total, sizes, prev, pager, next"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>
    <classdialog
      @confirm="confirm"
      :isshowDialog="isshowDialog"
      :formType="formtype"
      :dialogTitle="dialogTitle"
      @closedialog="closedialog"
      :dialogData="dialogData"
    ></classdialog>
    <phonemode
      class="phonemode"
      :datadetail="phoneData"
      :showPhone="showPhone"
      @closePhone="closePhone"
    ></phonemode>
  </div>
</template>

<script>
import phonemode from './component/phonemode'
import commonline from '@/components/commonline/commonline'
import classdialog from './component/classdialog'
import {
  helpcenter,
  helpUpdateisshow,
  helpDelete,
  helpcenterRead,
  helpcenterUpdatesort,
} from '@/api/help'
export default {
  data() {
    return {
      tableData: [],
      dialogData: {},
      page: 1,
      rows: 10,
      total: 0,
      isshowDialog: false,
      showPhone: false,
      dialogTitle: '帮组中心',
      formtype: 0,
      phoneData: [],
    }
  },
  components: {
    commonline,
    classdialog,
    phonemode,
  },
  created() {
    this.getData()
  },
  methods: {
    //总数翻页
    handleSizeChange(val) {
      this.rows = val
      this.getData()
    },
    //翻页
    handleCurrentChange(val) {
      this.page = val
      this.getData()
    },
    //添加和编辑成功
    confirm() {
      this.formtype = 0
      this.isshowDialog = false
      //刷新列表
      this.getData()
    },
    closedialog() {
      this.isshowDialog = false
      this.formtype = 0
    },
    async getData() {
      let params = {
        page: this.page,
        rows: this.rows,
      }
      let data = await helpcenter(params)
      this.tableData = data.data.list
      this.total = data.data.page.total
    },
    async getRead(val) {
      let data = await helpcenterRead({ id: val })
      this.dialogData = data.data
    },
    resetform() {
      this.$refs['classtopform'].resetFields()
      this.$message({
        type: 'success',
        message: '已重置!',
      })
      this.page = 1
      this.rows = 10
      //请求列表
      this.getData()
    },
    additem() {
      this.dialogTitle = '帮组中心-新增'
      this.isshowDialog = true
      this.formtype = 0
    },
    editform(id) {
      this.dialogTitle = '帮组中心-编辑'
      this.isshowDialog = true
      this.formtype = 1
      this.getRead(id)
    },
    //搜索查询
    searchlist() {
      this.$message({
        type: 'success',
        message: '查询成功!',
      })
      this.getData()
    },
    //修改热门状态
    async changeis_show(val, id) {
      let is_show = val ? 0 : 1
      let params = {
        id,
        is_show: is_show,
      }
      let data = await helpUpdateisshow(params)
      if (data.code == '0000') {
        this.$message.success('修改状态成功！')
        //刷新列表
        this.getData()
      } else {
        //刷新列表
        this.getData()
      }
    },
    //删除
    async deleteitems(id) {
      let params = {
        id: id,
      }
      let data = await helpDelete(params)
      if (data.code == '0000') {
        this.$message({
          type: 'success',
          message: data.msg,
        })
      }
      //刷新列表
      this.getData()
    },
    async sortHelp(val) {
      let params = {
        id: val.id,
        sort: val.sort,
      }
      let data = await helpcenterUpdatesort(params)
      if (data.code == '0000') {
        this.$message({
          type: 'success',
          message: data.msg,
        })
      }
      //刷新列表
      this.getData()
    },
    gophone(val) {
      this.showPhone = true
      this.phoneData = JSON.parse(val.detail)
    },
    closePhone() {
      this.showPhone = false
    },
  },
}
</script>

<style scoped lang='scss'>
.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.edittext {
  margin: 0 10px;
  color: #4c68ef;
  cursor: pointer;
  font-size: 13px;
}
</style>